<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <style>
        body{
            background-image: url("../image/1111.jpg");
            background-repeat: no-repeat;
            background-size: 100%;
            font-size: 25px;
            font-family:STXingkai;

        }
        a{
            text-decoration:none;
        }
        button{
            margin:10px;
        }
    </style>
</head>
<body>
    <div id="book">
            <table id="book-tab"  class="table table-hover" style="font-size: 18px;color:yellow ">
                <button id="inser-book"  class="btn-info btn btn-lg" data-toggle="modal" data-target="#myModal">添加书籍</button>
                <button v-on:click="" class="btn btn-warning">查询书籍</button>
                <input id="">
                <button id="dleBook" class="btn btn-danger">删除书籍</button>

                <colgroup span="6" width="180px"></colgroup>
                <colgroup span="1" width="90px"></colgroup>
                <tr>
                    <th ><input id="allCheck" type="checkbox"></th>
                    <th >编号</th>
                    <th >名字</th>
                    <th >价格</th>
                    <th >日期</th>
                    <th >类型</th>
                    <th >作者</th>
                    <th >上架</th>
                    <th >修改</th>
                </tr>
                <tr v-for="book in list">
                    <td ><input class="check" type="checkbox" :value="book.bookId"></td>
                    <td >{{book.bookId}}</td>
                    <td >{{book.bookName}}</td>
                    <td >{{book.bookPrice}}</td>
                    <td >{{book.bookDate}}</td>
                    <td >{{book.bookType}}</td>
                    <td >{{book.bookAuthor}}</td>
                    <td >{{book.bookPutaway}}</td>
                    <td>
                        <button v-on:click="show(book)" data-toggle="modal" data-target="#myModal" class="btn btn-danger modify">修改</button>
                    </td>
                </tr>
            </table>
<!--            分页区域-->
            <div class="pagination-div">
                <ul class="pagination" id="page-ul" >
                    <li class="page-item">
                        <a class="page-link" href="javascript:void(0);" @click="cutPage(1)">首页</a>
                    </li>
                    <li class="page-item" v-if="page.pageNow!=1">
                        <a class="page-link" href="javascript:void(0);"
                           @click="cutPage(page.pageNow-1)">{{page.pageNow-1}}</a></li>
                    <li class="page-item active">
                        <a class="page-link" href="javascript:void(0);">{{page.pageNow}}</a>
                    </li>
                    <li class="page-item" v-if="page.pageNow!=page.pageTotal">
                        <a class="page-link" href="javascript:void(0);"
                           @click="cutPage(page.pageNow+1)">{{page.pageNow+1}}</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="javascript:void(0);"
                           @click="cutPage(page.pageTotal)">尾页</a>
                    </li>
                </ul>
            </div>

            <!-- 模态框（Modal） -->
            <div class="modal fade"  id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog"  >
                    <div class="modal-content" id="myModal-smile" style=" height: 590px;margin: 0">
                        <div class="modal-header">
                            <h4 class="modal-title" id="myModalLabel">
                                添加书籍信息
                            </h4>
                        </div>
                        <div class="modal-body" >
<!--                            点击添加按钮iframe 引入添加页面代码-->
                            <iframe style="display: none" id="frame" src="insertBook.html" height="100%" width="100%"></iframe>

<!--                            点击修改按钮使修改页面显示-->
                            <form id="book-form" style="display: none;font-size: 20px">
                                <input type="hidden" class="form-control" id="bookId" name="bookId" v-model="book.bookId">
                                <div class="form-group">
                                    <label for="bookName">图书名字:</label>
                                    <input type="text" class="form-control" id="bookName" name="bookName" v-model="book.bookName">
                                </div>

                                <div class="form-group">
                                    <label for="bookPrice">图书价格：</label>
                                    <input type="number" class="form-control" step="0.01" id="bookPrice" name="bookPrice" v-model="book.bookPrice">
                                </div>

                                <div class="form-group">
                                    <label for="bookDate">图书日期：</label>
                                    <input type="date" class="form-control" id="bookDate" name="bookDate" v-model="book.bookDate">
                                </div>

                                <div class="form-group">
                                    是否上架：
                                    <label class="radio-inline">
                                        <input type="radio" v-model="book.bookPutaway" name="bookPutaway" id="optionsRadios3" value="是" checked> 是
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" v-model="book.bookPutaway" name="bookPutaway" id="optionsRadios4"  value="否"> 否
                                    </label>
                                </div>


                                <div class="form-group">
                                    <label for="bookType">图书类型：</label>
                                    <select class="form-control" name="bookType" id="bookType" v-model="book.bookType">
                                        <option value="">请选择</option>
                                        <option value="穿越">穿越</option>
                                        <option value="穿越">玄幻</option>
                                        <option value="穿越">修真</option>
                                        <option value="扫黄书">扫黄书</option>
                                        <option value="有色书籍">有色书籍</option>
                                    </select>
                                </div>

                                <div class="form-group">
                                    <label for="bookAuthor">图书作者：</label>
                                    <input type="text" class="form-control" id="bookAuthor" name="bookAuthor" v-model="book.bookAuthor">
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" id="refresh" class="btn btn-default" v-on:click="updBook()" data-dismiss="modal">关闭</button>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal -->
            </div>
    </div>


<!--引入js-->
<script type="text/javascript" src="../css/jquery-3.4.1.js"></script>
<script src="../bootstrap-4.6.0-dist/js/bootstrap.js" ></script>
<script src="../vue/vue.js" charset="utf-8"></script>
<script>

    let bookTabVue

    // 查询图书 需要接受一个当前页参数
    function selBook(pageNow) {
        let map = [];
        $.ajax({
            type: "post",
            url: "../Book/selBook",
            dataType: "json",
            data:{pageNow:pageNow, pageCount:5},
            async: false,
            success: function (data) {
                map = data;
                console.log(map);
            }
        });
        return map;
    }
       /*创建一个map装查询到的第一页的数据*/
       let map = selBook(1);
       //加载分页数据
    bookTabVue = new Vue({
           el: '#book',
            data: {
                list: map.data,// 展示表格
                page: map.page,// 用于分页
                book: { // 修改窗口的对象数据
                    bookId: "",
                    bookName: "",
                    bookPrice: "",
                    bookDate: "",
                    bookPutAway: "",
                    bookType: "",
                    bookAuthor: ""
                }
            },
           //data: map.page,//参数为后台传入的map中的page对象
           methods: {
               //切换页方法 参数为当前按钮所代表的对应页
               cutPage: function (pageNow) {
                   //查询要切换页的数据。把结果从新给表格赋值
                   bookTabVue.list = selBook(pageNow).data;
                   //把分页的vue重新赋值。
                   bookTabVue.page.pageNow = pageNow;
               },
               //显示模态框
               show:function (book) {
                   //给模态窗口赋值
                   this.book = book;
               }
               ,
               //修改方法
               updBook:function () {
                   $.ajax({
                       type: "post",
                       url: "../Book/updBook",
                       data: $("#book-form").serialize(),
                       dataType: "json",
                       success: function (data) {
                           //v-model的特性 双向绑定 data的值会根据表单（表格）改变  表单也会根据data值改变
                       }
                   });
               }
           }
       });


       //复选框的代码块
       window.onload =function (){
           var all = document.getElementById ("allCheck");			//全选checkbox
           var box = document.getElementsByClassName('check');	//子复选框

           //遍历checkbox，把子复选框的checked设置成全选框的状态，实现全选/全不选
           all.onclick = function (){
               for ( var i = 0; i < box.length; i++){
                   box[i].checked = this.checked;
               }
           };
           //遍历checkbox，子复选框有一个未选中时，如果全选框设为false不选状态
           for ( var i = 0; i < box.length; i++){
               box[i].onclick = function (){
                   if ( !this.checked ){
                       all.checked = false;
                   }
               };
           }
       }



    //删除书籍代码块
    $("#dleBook").click(function () {
        let bookIds = '';
        //获取被选中的复选框的id值 each()遍历
        $(".check").each(function () {
            //对所有符合该选择器的元素进行操作
            //判断该复选框是否选中
            if(this.checked){

                bookIds+=this.value + ",";
                $.ajax({
                    type: "post",
                    url: "../Book/delBook",
                    data: {bookIds: bookIds},
                    dataType: "json",
                    success: function (data) {
                        window.location.reload();
                    }
                });
            }
            console.log(bookIds);
        });
    })


    // //监控鼠标在模态块外的点击
    $("body").click(function(e){
        var e = e || window.event;
        var elem = e.target;
        var display=$("#myModal").css('display');
        //如果模态块处于显示转态
        if(display!='none') {
            if ($(elem).is('#myModal-smile') || $(elem).is('#myModal-smile *')) {

            } else {
                //当鼠标点击在模块外时隐藏两个列表
                $("#book-form").css("display", 'none');
                $("#frame").css("display", 'none');
            }
        }
    })


    //添加按钮切换模态块中的内容
    $("#inser-book").click(function () {
         $("#frame").css("display",'block');
    })

    //修改按钮切换table表格的状态
    $(".modify").click(function () {
        $("#book-form").css("display",'block');
        $("#myModalLabel").text("修改书籍信息");
    })
    //点击关闭按钮修改iframe 与table表格的状态
    $("#refresh").click(function () {
        $("#book-form").css("display",'none');
        $("#frame").css("display",'none');
        window.location.reload();
    })

</script>
</body>
</html>